<template>
  <div class="todo-list">
    <h3>所有待办事项：</h3>
    <ul v-if="total">
      <TodoItem
        v-for="todo in todos"
        :id="todo.id"
        :title="todo.title"
        :completed="todo.completed"
        :key="todo.id"
      ></TodoItem>
    </ul>
    <div v-else>待办事项为空，请添加新待办事项！</div>
    <div>共计{{ total }}项，已完成{{ completed }}项，未完成{{ uncompleted }}项</div>
    <a href="https://www.baidu.com" @click.prevent>删除{{ completed }}项已完成事项</a>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  name: 'TodoList',
  props: { // 属性，从父组件中接收传递的数据
    todos: {
      type: Array,
      required: true
    }
  },
  computed: { // 计算属性
    total() {
      return this.todos.length
    },
    completed() {
      return this.todos.filter(todo => todo.completed).length
    },
    uncompleted() {
      return this.total - this.completed
    }
  },
  components: {
    TodoItem
  }
}
</script>

<style lang="scss">

</style>
